<template>
  <div class="speed-echart" ref="chartRef"></div>
</template>
<script setup>
  import { onMounted, onBeforeUnmount, ref } from 'vue';
  import * as echarts from 'echarts';
  import { api } from '/@/api/plat/fusion-track.js';

  const props = defineProps({
    alarmInfo: {
      type: Object,
      default: () => {},
    },
  });

  let chartInstance = null;
  const chartRef = ref(null);

  function initEChart() {
    if (chartRef.value) {
      chartInstance = echarts.init(chartRef.value);
      const options = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: {
            color: '#ffffff',
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff',
            },
          },
          axisTick: {
            lineStyle: {
              color: '#ffffff',
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#ffffff',
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff',
            },
          },
          axisTick: {
            lineStyle: {
              color: '#ffffff',
            },
          },
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            // 设置填充区域的颜色
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(29,87,166, 0.9)', // 渐变开始颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(29,87,166, 0.9)', // 渐变结束颜色
                  },
                ],
              },
            },
            // 设置折线的颜色
            lineStyle: {
              color: '#00a0ff', // 折线颜色
              width: 2, // 折线宽度
            },
            // 设置数据点的颜色
            itemStyle: {
              color: '#00a0ff', // 数据点颜色
              borderColor: '#fff', // 数据点边框颜色
              borderWidth: 2, // 数据点边框宽度
            },
          },
        ],
      };
      chartInstance.setOption(options);
    }
  }

  function getSpeedList() {
    api
      .queryList({
        // startTime: props.alarmInfo.triggerTime,
        // endTime: props.alarmInfo.endTime,
      })
      .then(({ data }) => {
        console.log('data: ', data);
      });
  }

  onMounted(getSpeedList);
  onBeforeUnmount(() => {
    if (chartInstance) {
      chartInstance.dispose();
    }
  });
</script>

<style lang="less" scoped>
  .speed-echart {
    width: 100%;
    height: 100%;
  }
</style>
